<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { computed, reactive, ref } from 'vue';

import { Modal } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { Apis } from '#/api';
import { Page } from '#/components/page';

const gridRef = ref<any>(null);

interface RowType {
  category: string;
  color: string;
  id: string;
  price: string;
  productName: string;
  releaseDate: string;
}

const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      component: 'Input',
      fieldName: 'userId',
      label: '用户ID',
    },
    {
      component: 'Input',
      fieldName: 'name',
      label: '用户名称',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          {
            label: '正常',
            value: '1',
          },
          {
            label: '封禁',
            value: '2',
          },
        ],
        placeholder: '请选择',
      },
      fieldName: 'status',
      label: '用户状态',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
  wrapperClass: 'grid-cols-1 md:grid-cols-4',
};

const gridOptions: VxeGridProps<RowType> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  scrollX: {
    enabled: true,
  },
  scrollY: {
    enabled: true,
  },
  columns: [
    { type: 'checkbox', width: 50 },
    { title: '序号', type: 'seq', width: 50 },
    {
      field: 'id',
      title: 'ID',
      width: 100,
    },
    { field: 'username', title: '用户名', minWidth: 120 },
    { field: 'nickname', title: '用户昵称', minWidth: 120 },
    {
      field: 'avatar',
      title: '头像',
      width: 100,
      slots: { default: 'avatar' },
    },
    { field: 'gender', title: '性别', width: 80 },
    { field: 'mobile', title: '用户手机号', minWidth: 200 },
    {
      field: 'roles',
      title: '角色',
      minWidth: 150,
      slots: { default: 'roles' },
    },
    { field: 'circleName', title: '所属圈子', minWidth: 200 },
    { field: 'introduce', title: '个人简介', minWidth: 200 },

    { field: 'status', title: '记录状态', width: 80 },
    { field: 'lastActiveAt', title: '最后活跃时间', width: 150 },
    {
      field: 'action',
      title: '操作',
      width: 110,
      fixed: 'right',
      slots: { default: 'action' },
    },
  ],
  rowClassName: 'h-[60px] cursor-pointer',
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: true,
  },
  rowConfig: {
    isCurrent: true,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await Apis.system.user.getPage({
          params: {
            page: page.currentPage,
            pageSize: page.pageSize,
            limit: 200,
            ...formValues,
          },
        });
      },
    },
  },
};

const tabList = ref([
  { label: '登录日志', value: 'login' },
  { label: '操作日志', value: 'operate' },
  { label: '慢SQL日志', value: 'slowSql' },
]);

const searchParams = reactive<any>({
  type: tabList.value[0]?.value,
});

const tabInfo = computed(() => {
  return tabList.value.find((d) => d.value === searchParams.type);
});

const selectedRows = ref<any[]>([]);

const [Grid, gridApi] = useVbenVxeGrid({
  gridClass: 'h-full',
  formOptions,
  gridOptions,
  gridEvents: {
    cellClick({ row }) {
      gridApi.grid.toggleCheckboxRow(row);
      selectedRows.value = gridApi.grid.getCheckboxRecords();
    },
    checkboxChange() {
      selectedRows.value = gridApi.grid.getCheckboxRecords();
    },
  },
});

function handleDelete(_row: any) {
  Modal.confirm({
    title: '确定要删除吗？',
    content: '删除后将无法恢复',
    onOk: () => {},
  });
}

function handleTabChange(type) {
  searchParams.type = type;
  gridApi.reload();
}
</script>

<template>
  <Page content-class="h-full">
    <a-row :gutter="[12, 0]" class="h-full">
      <a-col :span="4" class="h-full">
        <div class="h-full w-full rounded-lg bg-white p-2">
          <a-list
            :bordered="false"
            :data-source="tabList"
            item-layout="horizontal"
            size="small"
          >
            <template #renderItem="{ item }">
              <a-list-item
                :class="{ active: searchParams.type === item.value }"
                class="list-item h-[42px] cursor-pointer"
                @click="handleTabChange(item.value)"
              >
                <a-list-item-meta>
                  <template #title>
                    <span> {{ item.label }}</span>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </a-col>

      <a-col :span="20" class="h-full">
        <div class="flex h-full flex-1 flex-col">
          <Grid ref="gridRef" :table-title="tabInfo?.label">
            <template #toolbar-tools>
              <a-space>
                <a-button
                  :disabled="selectedRows.length === 0"
                  danger
                  type="primary"
                  @click="handleDelete(selectedRows[0])"
                >
                  批量删除
                </a-button>
              </a-space>
            </template>

            <template #avatar="{ row }">
              <div class="flex h-full w-full rounded-full">
                <a-image :height="48" :src="row.avatar" :width="60" />
              </div>
            </template>

            <template #roles="{ row }">
              <a-tag
                v-for="role in row.roles"
                :key="role.id"
                :color="role.color"
              >
                {{ role.name }}
              </a-tag>
            </template>
            <template #isDeleted="{ row }">
              <a-tag :color="row.deletedAt ? 'red' : 'green'">
                {{ row.deletedAt ? '已删除' : '未删除' }}
              </a-tag>
            </template>

            <template #action="{ row }">
              <a-button size="small" type="link" @click.stop="handleEdit(row)">
                查看
              </a-button>
              <a-button
                danger
                size="small"
                type="link"
                @click.stop="handleDelete([row])"
              >
                删除
              </a-button>
            </template>
          </Grid>
        </div>
      </a-col>
    </a-row>
  </Page>
</template>

<style lang="scss" scoped>
.active {
  color: #2d8cf0;
  background: #f0faff;

  :deep(.ant-list-item-meta-title) {
    color: #2d8cf0 !important;
  }

  :deep(.ant-list-item-meta-description) {
    color: #2d8cf0 !important;
  }

  &:hover {
    background: #f0faff;
  }
}

:deep(.ant-tabs-nav-wrap) {
  justify-content: center;
}
</style>
